<!--
 * @Date: 2023-08-02 13:50:49
 * @LastEditors: uphldjx 1373577124@qq.com
 * @LastEditTime: 2024-05-29 10:43:33
 * @FilePath: \NingxiangElderlyCare\src\views\datacenter\comprehensiveQueries\components\quickStatistics\components\operateForm\preview.vue
-->
<template>
	<div id="print_area">
		<section class="condition">
			<p class="line-label">已选条件</p>
			<div class="condition-box">
				<el-form label-width="120px">
					<el-form-item label="统计日期">
						<el-tag color="#E7E7E7" style="color: #000" :hit="false" type="info">
							{{ formMod.date || '全部' }}
						</el-tag>
					</el-form-item>
					<el-form-item label="统计维度">
						<el-space style="display: flex; flex-flow: row wrap; gap: 10px">
							<el-tag color="#E7E7E7" v-for="(item, index) in formMod.dimensionList" :key="index" style="color: #000" :hit="false" type="info">
								{{ item }}
							</el-tag>
						</el-space>
					</el-form-item>
					<el-form-item label="统计主体及其他统计条件">
						<div>
							<el-space>
								<span> {{ baseConditions.name }}</span>
								<el-tag color="#E7E7E7" style="color: #000" type="info" v-for="(item, index) in baseConditions.publicLogicList" :key="index">
									{{ item.name }}:{{ item.fieldValue }}
								</el-tag>
							</el-space>
						</div>

						<div>
							<el-space v-for="(v, k) in fieldConditions" :key="k">
								<span> {{ k }}</span>
								<el-tag color="#E7E7E7" style="color: #000" type="info" v-for="(item, index) in v.publicLogicList" :key="index">
									{{ item.name }}:{{ item.fieldValue }}
								</el-tag>
							</el-space>
						</div>
					</el-form-item>
				</el-form>
			</div>
		</section>

		<section class="condition">
			<p class="line-label">统计结果</p>
			<div class="condition-box" v-if="dimensionTypeLabel">
				<div class="btn tr" id="no-print">
					<el-button type="primary" @click="printHtml('print_area')">打印</el-button>
				</div>
				<el-table default-expand-all row-key="name" border :data="tableData" style="width: 100%" class="mt10">
					<el-table-column :label="dimensionTypeLabel" align="center" prop="name">
						<el-table-column prop="name" label="所属区" v-if="dimensionTypeLabel != '行政区划'" align="center" />
					</el-table-column>
					<el-table-column :label="baseConditions.name" align="center">
						<el-table-column prop="value" :label="valueLabelTitle" align="center" />
					</el-table-column>
				</el-table>
			</div>
		</section>
		<section class="condition">
			<p class="line-label">图表展示</p>
			<div class="condition-box">
				<div class="tr">
					<el-radio-group v-model="chartType" @change="handleChangeChat">
						<el-radio-button label="柱状图" value="bar"></el-radio-button>
						<el-radio-button label="饼图" value="pie"></el-radio-button>
					</el-radio-group>
				</div>
				<AplidCharts type="BasicBar" :option="option" style="height: 100%" ref="chartBarEl"></AplidCharts>
			</div>
		</section>
		<div class="paging"></div>
	</div>
</template>

<script setup lang="ts">
import { printHtml } from '@/utils/print'
import apiMode from '@/apiMod/index'

const props = defineProps<{
	nowRowData: any
}>()

const formMod: any = ref({
	dimension: '',
	dimensionList: [],
	orgName: '',
})

const tableData = ref([])
let baseConditions: any = ref({})
let fieldConditions: any = ref({})

const dimensionTypeLabel = ref('')
const valueLabelTitle = ref('')
const chartBarEl = ref(null)

// 图表展示方式
const chartType = ref('bar')
const option = {
	color: ['#0052D9', '#00A870', '#ED7B2F'],
	dataset: {
		source: [],
	},
	legend: {
		show: false,
	},
	dataZoom: [
		{
			type: 'inside',
			start: 0,
			end: 80,
		},
	],
	series: [
		{
			name: '统计',
			type: 'bar',
			barBorderRadius: [4, 4, 0, 0],
			barWidth: 15,
			emphasis: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.3)',
			},
		},
	],
}

const handleChangeChat = () => {
	chartBarEl.value?.setOptions({
		xAxis: {
			show: chartType.value == 'bar',
		},
		yAxis: {
			show: chartType.value == 'bar',
		},
		series: [
			{
				name: '统计',
				type: chartType.value,
			},
		],
	})
}

const getInitData = () => {
	apiMode.view_statisticalConfiguration_view(props.nowRowData.id).then((res) => {
		if (!res.data?.configurationInformation) return
		const configurationInformation = JSON.parse(res.data.configurationInformation)
		formMod.value = JSON.parse(res.data.result)
		baseConditions.value = JSON.parse(res.data.statisticalConditions)
		fieldConditions.value = configurationInformation.fieldConditions || {}
		tableData.value = configurationInformation.tableData || []
		dimensionTypeLabel.value = configurationInformation.dimensionTypeLabel
		valueLabelTitle.value = configurationInformation.valueLabelTitle
		chartBarEl.value?.setOptions({
			dataset: {
				source: [
					['名称', '数量'],
					...tableData.value.map((item) => {
						return [item.name, item.value]
					}),
				],
			},
		})
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: right;
	color: #1c1c28;
}

.condition {
	padding: 20px;

	.condition-box {
		margin: 16px;
		padding: 20px;
		background-color: #fff;
	}
}

.line-label {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	position: relative;
	z-index: 0;
	width: 100%;
	padding-left: 10px;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 6px;
		height: 100%;
		background: #0052d9;
		z-index: -1;
	}
}
</style>
